<template>
  <div class="post_image" v-show="this.$store.state.imgChoose">
    <h1>选择封面图片</h1>
    <div class="bothom">
      <div class="left">
        <div
          class="canvas"
          @mousedown="touchstartFunc"
          @mousemove="touchmoveFunc"
          @mouseup="endFunc"
        >
          <canvas :width="cw" :height="ch" ref="canvas"></canvas>
          <div
            class="mask"
            v-show="isMask"
            :style="{
              width: mw + 'px',
              height: mh + 'px',
              left: ml + 'px',
              top: mt + 'px',
            }"
          ></div>
        </div>
        <input
          type="file"
          class="file"
          accept="image/*"
          ref="file"
          @change="change_file"
        />
        <div class="btns">
          <button @click="click_file">选择图片</button>
          <button @click="scaleFunc(1)">放大</button>
          <button @click="scaleFunc(0)">缩小</button>
          <button @click="saveFunc">保存图片</button>
        </div>
      </div>

      <img :src="iamgeUrl" />
    </div>
    <button class="ok" @click="this.$store.state.imgChoose = false">
      确定
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cw: 700,
      ch: 460,
      mw: 660,
      mh: 430,
      ml: 20,
      mt: 15,
      iw: 0,
      ih: 0,
      il: 0,
      it: 0,
      isMask: false,
      iamgeUrl:
        "https://img.gejiba.com/images/350b3049504e2b1dbf08c160cc4c0701.jpg",
    };
  },
  methods: {
    click_file() {
      this.$refs.file.click();
    },
    change_file() {
      this.isMask = true;
      let file = this.$refs.file.files[0];
      if (!file) return;
      let fileExa = new FileReader();
      fileExa.readAsDataURL(file);
      fileExa.onload = (ev) => {
        this.IMAGE = new Image();
        this.IMAGE.src = ev.target.result;
        // console.log(this.IMAGE.src);
        // console.log(this.IMAGE);
        this.IMAGE.onload = () => {
          this.iw = this.IMAGE.width;
          this.ih = this.IMAGE.height;
          let n; //图片缩放比例
          if (this.iw > this.ih) {
            n = this.iw / this.cw;
            this.ih = this.ih / n;
            this.iw = this.cw;
          } else if (this.ih > this.iw) {
            n = this.ih / this.ch;
            this.iw = this.iw / n;
            this.ih = this.ch;
          }
          // console.log(this.IMAGE.width,this.IMAGE.height);
          this.il = (this.cw - this.iw) / 2;
          this.it = (this.ch - this.ih) / 2;
          // console.log(this.il,this.it);

          this.drawImage();
        };
      };
    },
    drawImage() {
      //开始画画
      this.CTX = this.$refs.canvas.getContext("2d");
      // console.log(this.CTX);
      this.CTX.clearRect(0, 0, this.cw, this.ch);
      this.CTX.drawImage(this.IMAGE, this.il, this.it, this.iw, this.ih);
    },
    scaleFunc(val) {
      if (!this.IMAGE) return;
      let n = this.iw / this.ih,
        n1 = 20,
        n2 = 20 / n;
      if (val) {
        this.iw += n1;
        this.ih += n2;
      } else {
        this.iw -= n1;
        this.ih -= n2;
      }
      this.drawImage();
    },
    touchstartFunc(e) {
      this.bool = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    touchmoveFunc(e) {
      if (!this.bool) return;
      this.moveX = e.clientX - this.startX;
      this.moveY = e.clientY - this.startY;
      this.il += this.moveX;
      this.it += this.moveY;
      this.drawImage();
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    endFunc(e) {
      this.bool = false;
    },
    saveFunc() {
      if (!this.IMAGE) return;
      let imageData = this.CTX.getImageData(this.ml, this.mt, this.mw, this.mh);
      let canvas2 = document.createElement("canvas"), //新的画布
        canvas2CTX = canvas2.getContext("2d");
      canvas2.width = this.mw;
      canvas2.height = this.mh;
      canvas2CTX.putImageData(imageData, 0, 0, 0, 0, this.mw, this.mh);
      // console.log(canvas2.toDataURL("image/png"));
      this.iamgeUrl = canvas2.toDataURL("image/png");
      this.imageName = Date.now();
      console.log(this.imageName);
      // this.$store.dispatch("get_test", {
      //   url: this.iamgeUrl,
      //   name: this.imageName,
      // });
      this.$store.state.img = this.iamgeUrl;
    },
  },
};
</script>

<style lang="less" scoped>
.post_image {
  h1{
    margin: 0 auto;
  }
  width: 1500px;
  height: 650px;
  position: absolute;
  left:50%;
    top:50%;
    margin-top:-325px;
    margin-left:-750px;
  background-color: aliceblue;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  svg {
    width: 50px;
    height: 50px;
  }
  .bothom {
    display: flex;

    .left {
      border: 1px solid black;
      margin: 20px;
      .canvas {
        position: relative;
        z-index: 999;
        .mask {
          position: absolute;
          background-color: rgba(0, 0, 0, 0.211);
          border: 1px dashed rgba(0, 0, 0, 0.575);
        }
      }
      .btns {
        display: flex;
        justify-content: center;
        button {
          margin: 0 5px;
          font-size: 20px;
        }
      }
    }

    img {
      margin: 20px;
      width: 660px;
      height: 430px;
    }
  }
  input {
    display: none;
  }
  .ok {
    margin-left: 700px;
    width: 100px;
    height: 60px;
    font-size: 30px;
  }
}
</style>